code (highlighted)

This block is part of the state ui group and was last modified in core v15.0.0.

code (highlighted) v15.0.0

Source code with syntax highlighting. Renders server-side with no external library; supports nginx, javascript, json, bash, go, sql and yaml.

In pins 7
  • value required
    value

    The source code to display.

  • value
    value

    Language to highlight as: nginx, javascript, json, bash, go, sql or yaml. Unknown or empty renders as plain text. • Hidden when unused

  • value
    value

    Show line numbers down the left. Any truthy value. • Hidden when unused

  • value
    value

    Lines to emphasise, e.g. "3,7-9". Ignored if unparseable. • Hidden when unused

  • class
    uiclass

    Assigns a CSS class to the element. • Hidden when unused

  • style
    uistyle

    Applies inline CSS style to the element • Hidden when unused

  • attributes
    uiattributes

    Adds custom attributes to the element. • Hidden when unused

Out pins 1
  • state
    state

    Returns the element to the frontend state.

code highlight
syntax highlight
highlighted code
snippet

code takes the source as a value and the language as another, and renders it highlighted with optional line numbers. The value pin is where the code comes from, so it is just as happy with a fixed snippet as with a field read off a document: a docs page, a stored template, or the response an API call returned during a support session.

Studio canvas example for the code (highlighted) block: rendering code on a page.

Version history

Introduced in v15.0.0.


Back to state ui Return to the main group to view all sub-groups Back to state elements Return to the group to view all blocks within this group